<template>
  <a-modal :title="title" :width="900" :after-close="reset" @ok="submit">
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ style: { width: '80px' } }">
      <a-form-item label="数据排序" name="sort">
        <a-input v-model:value="form.sort" placeholder="数据排序" />
      </a-form-item>
      <a-form-item label="数据值" name="value">
        <a-textarea v-model:value="form.value" placeholder="数据组对应的数据值（json数据）" :auto-size="{ minRows: 4, maxRows: 8 }" />
      </a-form-item>
      <a-form-item label="状态" name="status">
        <a-input v-model:value="form.status" placeholder="状态（1：开启；2：关闭；）" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { systemgroupdataAddup, systemgroupdatainfo } from './api';
import { systemgroupdata, type Isystemgroupdata } from './entity';
import { validReg } from '@/utils/validate';

const props = withDefaults(defineProps<{
  data: Partial<Isystemgroupdata>
}>(), {
})
const title = computed(() => props.data.id ? '编辑' : '新增')
const { formRef, submit, close } = useDialog({ validCallback: save })

let form = $ref(new systemgroupdata())
watchEffect(() => {
  if (props.data.id) {
    systemgroupdatainfo(props.data.id).then(res => {
      form.setProps(res)
    })
  }
})

const rules = {
  systemgroupdataName: [validReg('required', '请输入用户名')]
}

onMounted(() => {
})
const emit = defineEmits(['change'])
function save() {
  systemgroupdataAddup(form).then(() => {
    AntMessage.success('保存成功')
    close()
    emit('change')
  })
}

function reset() {
  form = new systemgroupdata()
}
</script>

<style lang="less"></style>